<template>
  <div class="index-container-ty">
    <a-row type="flex" justify="start" :gutter="3">
      <a-col :sm="24" :lg="24">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <!-- <img src="/@/assets/images/daiban.png" /> -->
              待分配订单【{{ props.newOrderData.length }}】
            </div>
          </template>

          <template v-if="props.newOrderData && props.newOrderData.length > 0" #extra>
            <a @click="goNurseUserOrdersList">更多
              <Icon icon="ant-design:double-right-outlined" />
            </a>
          </template>

          <a-table :class="'my-index-table tytable1'" ref="table1" size="small" rowKey="id" :columns="columns"
            :dataSource="props.newOrderData" :pagination="false">
            <template #ellipsisText="{ text }">
              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleOrders(record)">分配</a>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <a-col :sm="24" :lg="24" class=" mt-4">
      <a-card>
        <template #title>
          <div class="index-md-title">
            <!-- <img src="/@/assets/images/zaiban.png" /> -->
            申请退款订单【{{ props.refundOrderData.length }}】
          </div>
        </template>

        <template v-if="props.refundOrderData && props.refundOrderData.length > 0" #extra>
          <a @click="goNurseUserOrdersRefundList">更多
            <Icon icon="ant-design:double-right-outlined" />
          </a>
        </template>

        <a-table :class="'my-index-table tytable2'" ref="table1" size="small" rowKey="id" :columns="columns"
          :dataSource="props.refundOrderData" :pagination="false">
          <template #ellipsisText="{ text }">
            <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
          </template>

          <template #dayWarnning="{ text, record }">
            <BellTwoTone style="font-size: 22px" />
          </template>

          <template #action="{ text, record }">
            <a @click="handleRefund(record)">办理</a>
          </template>
        </a-table>
      </a-card>
    </a-col>
    <a-row type="flex" justify="start" :gutter="3">
      <a-col :span="24">
        <div style="height: 5px"></div>
      </a-col>
    </a-row>
    <!-- <a-col :sm="24" :lg="12">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <img src="/@/assets/images/guaz.png" />
              我的挂账【{{ dataSource4.length }}】
            </div>
          </template>

          <a-table :class="'my-index-table tytable4'" ref="table1" size="small" rowKey="id" :columns="columns"
            :dataSource="dataSource4" :pagination="false">
            <template #ellipsisText="{ text }">
              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleData">办理</a>
            </template>
          </a-table>
        </a-card>
      </a-col> -->

    <!-- <a-col :sm="24" :lg="12">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <img src="/@/assets/images/duban.png" />
              我的督办【{{ dataSource3.length }}】
            </div>
          </template>

          <a-table :class="'my-index-table tytable3'" ref="table1" size="small" rowKey="id" :columns="columns"
            :dataSource="dataSource3" :pagination="false">
            <template #ellipsisText="{ text }">
              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleData">办理</a>
            </template>
          </a-table>
        </a-card>
      </a-col> -->

  </div>
</template>

<script lang="ts" setup>
import JEllipsis from '/@/components/Form/src/jeecg/components/JEllipsis.vue';
import { BellTwoTone } from '@ant-design/icons-vue';
import { router } from '/@/router';

const props = defineProps({
  newOrderData: {
    type: Object,
    required: true,
  },
  refundOrderData: {
    type: Object,
    required: true,
  },
});

//4-7天
const tip_green = 'rgba(0, 255, 0, 1)';
//1-3天
const tip_yellow = 'rgba(255, 255, 0, 1)';
//超期
const tip_red = 'rgba(255, 0, 0, 1)';

const textMaxLength = 8;



// const dataSource1 = ref([]);
// const dataSource2 = ref([]);
// const dataSource3 = ref([]);
// const dataSource4 = ref([]);
const columns = [
  {
    title: '',
    dataIndex: '',
    key: 'rowIndex',
    width: 50,
    fixed: 'left',
    align: 'center',
    slots: { customRender: 'dayWarnning' },
  },
  {
    title: '用户姓名',
    align: "center",
    dataIndex: 'userName',
    width: 80,
  },
  {
    title: '监护人姓名',
    align: "center",
    dataIndex: 'familyName',
    width: 88,
  },
  {
    title: '订单金额',
    align: "center",
    dataIndex: 'amt',
    width: 80,
  },
  {
    title: '订单类型',
    align: "center",
    dataIndex: 'nurseType_dictText',
    width: 120,
  },
  {
    title: '联系人电话',
    align: "center",
    dataIndex: 'phone'
  },
  {
    title: '联系人',
    align: "center",
    dataIndex: 'contacts',
    width: 80,
  },
  {
    title: '订单摘要',
    align: "center",
    dataIndex: 'orderText',
    width: 120,
  },
  {
    title: '备注',
    align: "center",
    dataIndex: '',
    slots: { customRender: 'remark' },
  },
  {
    title: '地区名称',
    align: "center",
    dataIndex: 'areaName'
  },
  {
    title: '详细地址',
    align: "center",
    dataIndex: 'address'
  },
  {
    title: '医院名称',
    align: "center",
    dataIndex: 'hospitalName'
  },
  {
    title: '科室名称',
    align: "center",
    dataIndex: 'deptName'
  },
  {
    title: '床号名称',
    align: "center",
    dataIndex: 'bedName'
  },
  {
    title: '创建时间',
    align: "center",
    dataIndex: 'createTime'
  },
  // {
  //   title: '剩余天数',
  //   align: 'center',
  //   dataIndex: 'restDay',
  //   width: 80,
  // },
  // {
  //   title: '工单标题',
  //   align: 'center',
  //   dataIndex: 'orderTitle',
  //   slots: { customRender: 'ellipsisText' },
  // },
  // {
  //   title: '工单编号',
  //   align: 'center',
  //   dataIndex: 'orderNo',
  // },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 60,
    slots: { customRender: 'action' },
  },
];

function getTipColor(rd) {
  let num = rd.restDay;
  if (num <= 0) {
    return tip_red;
  } else if (num >= 1 && num < 4) {
    return tip_yellow;
  } else if (num >= 4) {
    return tip_green;
  }
}

// function mock() {
//   dataSource1.value = tempSs1;
//   dataSource2.value = tempSs2;
//   dataSource3.value = tempSs1;
//   dataSource4.value = tempSs2;
//   ifNullDataSource(dataSource4, '.tytable4');
// }

// function ifNullDataSource(ds, tb) {
//   if (!ds || ds.length == 0) {
//     var tmp = document.createElement('img');
//     tmp.src = noDataPng;
//     tmp.width = 300;
//     let tbclass = `${tb} .ant-table-placeholder`;
//     document.querySelector(tbclass).innerHTML = '';
//     document.querySelector(tbclass).appendChild(tmp);
//   }
// }


function handleOrders(record) {

  router.push({
    path: "/nurse/nurse_user_orders/nurseUserOrdersList",
    query: {
      orderId: record.id
    }
  });
}
function handleRefund(record) {
  router.push({
    path: "/nurse/nurse_user_orders_refund/nurseUserOrdersRefundList",
    query: {
      orderId: record.id
    }
  });
}

function goNurseUserOrdersList() {
  router.push({
    path: "/nurse/nurse_user_orders/nurseUserOrdersList",
  });
}

function goNurseUserOrdersRefundList() {
  router.push({
    path: "/nurse/nurse_user_orders_refund/nurseUserOrdersRefundList",
  });
}


</script>

<style scoped lang="less">
.my-index-table {
  height: 270px;

  table {
    font-size: 14px !important;
  }
}

.index-container-ty {
  margin: 12px 12px 0;

  :deep(.ant-card-body) {
    padding: 10px 12px 0 12px;
  }

  :deep(.ant-card-head) {
    line-height: 24px;
    min-height: 24px;
    background: #059669 !important;

    .ant-card-head-title {
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .ant-card-extra {
      padding: 0;

      a {
        color: #fff;
      }

      a:hover {
        color: #152ede;
      }
    }
  }

  :deep(.ant-table-footer) {
    text-align: right;
    padding: 6px 12px 6px 6px;
    background: #fff;
    border-top: 2px solid #f7f1f1;
  }

  .index-md-title {
    position: relative;
    width: 100%;
    color: #fff;
    font-size: 21px;
    font-family: cursive;
    padding-left: 25px;

    img {
      position: absolute;
      height: 25px;
      left: 0;
    }
  }

  :deep(.ant-table-thead > tr > th),
  :deep(.ant-table-tbody > tr > td) {
    border-bottom: 1px solid #90aeff;
  }

  :deep(.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th),
  :deep(.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th) {
    border-bottom: 1px solid #90aeff;
  }

  :deep(.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th) {
    border-bottom: 1px solid #90aeff;
  }

  :deep(.ant-table-small) {
    border: 1px solid #90aeff;
  }

  :deep(.ant-table-placeholder) {
    padding: 0;
    height: 215px;
  }
}
</style>
